<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>抽屉组件</title>
  <link href="../../component/pear/css/pear.css" rel="stylesheet" />
  <style>
    .wrap {
      display: none;
    }
  </style>
</head>

<body class="pear-container">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">开发环境</div>
        <div class="layui-card-body">
          Drawer 在 弹出层 UI 上带来不一样的体验.
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              <script src="component/layui/layui.js"></script>
              并
              <script src="component/pear/pear.js"></script>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <!-- 新版 API -->
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">基于 layer 的抽屉扩展</div>
        <div class="layui-card-body">
          <button id="layerDrawerLeft" class="pear-btn pear-btn-success">左</button>
          <button id="layerDrawerRight" class="pear-btn pear-btn-success">右</button>
          <button id="layerDrawerTop" class="pear-btn pear-btn-success">上</button>
          <button id="layerDrawerBottom" class="pear-btn pear-btn-success">下</button>
          <button id="layerDrawer" class="pear-btn pear-btn-success">更多参数示例</button>
          <button id="layerDrawerParent" class="pear-btn pear-btn-success">父窗口打开</button>
          <button id="layerDrawerIframe" class="pear-btn pear-btn-success">iframe远程页面</button>
          <button id="layerDrawerURL" class="pear-btn pear-btn-success">URL远程页面</button>
          <div id="layertargetEl" style="width: 600px;
								height: 300px;
								overflow: hidden;
								position: relative;
								border: 1px solid gainsboro;
								background-color: #EEE;
								margin-top: 10px;
								display: flex;
								justify-content: space-around;
								align-items: center">
            <button id="layertargetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
          </div>
          <blockquote class="layui-elem-quote layui-quote-nm">指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden;
            position: relative;"</blockquote>
          <blockquote class="layui-elem-quote layui-quote-nm">
            使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。
          </blockquote>
        </div>
      </div>
    </div>
    <div class="layui-col-md12">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">显示代码</h2>
          <div class="layui-colla-content">
            <pre class="layui-code" lay-encode="true">
              $("#layerDrawerLeft").click(function(){
              drawer.open({
              offset: 'l',
              area: "30%",
              content: "left内容",
              })
              })
              $("#layerDrawerRight").click(function () {
              drawer.open({
              offset: 'r',
              area: "30%",
              content: "right内容",
              })
              })
              $("#layerDrawerTop").click(function () {
              drawer.open({
              offset: "t",
              content: "top内容",
              })
              })
              $("#layerDrawerBottom").click(function () {
              drawer.open({
              offset: "b",
              content: "bottom内容",
              })
              })

              $("#layerDrawer").click(function () {
              var index = drawer.open({
              title: ['标题', 'font-size:16px;color:#2d8cf0'],
              maxmin: true,
              offset: "r",
              area: "30%",
              content: "抽屉内容",
              btn:"关闭",
              yes:function(index,layero){
              drawer.close(index);
              console.log(index,layero);
              },
              btnAlign: "l",
              closeBtn: 1,
              })
              })

              $("#layerDrawerParent").click(function () {

              var index = parent.layui.drawer.open({
              title: ['标题', 'font-size:16px;color:#2d8cf0'],
              maxmin: true,
              offset: "r",
              area: "30%",
              content: "抽屉内容",
              btn:"关闭",
              yes:function(index,layero){
              drawer.close(index);
              console.log(index,layero);
              },
              btnAlign: "l",
              closeBtn: 1,
              })
              })

              $("#layertargetDemo").click(function () {
              drawer.open({
              target: "#layertargetEl",
              offset: "r",
              content: $(".layer-right"),
              area: "50%",
              });
              })

              $("#layerDrawerIframe").click(function () {
              drawer.open({
              title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
              offset: 'r',
              area: "80%",
              maxmin: true,
              closeBtn: 1,
              iframe: window.location.origin + "/view/document/table.html"
              })
              })

              $("#layerDrawerURL").click(function () {
              drawer.open({
              title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
              offset: 'r',
              area: "80%",
              maxmin: true,
              closeBtn: 1,
              url: window.location.origin + "/view/document/drawerFragment.html"
              })
              })
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="layer-left" style="display: none;">
    <br />
    <h3>左侧弹层内容...</h3>
  </div>
  <div class="layer-right" style="display: none;">
    <br />
    <h3>右侧弹层内容...</h3>
  </div>
  <div class="layer-top" style="display: none;">
    <br />
    <h3>上侧弹层内容...</h3>
  </div>
  <div class="layer-bottom" style="display: none;">
    <br />
    <h3>下侧弹层内容...</h3>
  </div>

  <div class="layer-open-mask" style="display: none;">
    <br />
    <h3>点击右侧灰色区域</h3>
  </div>
  <div class="layer-close-mask" style="display: none;">
    <button id="btnClose" class="pear-btn pear-btn-primary"
      style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
  </div>
  <div class="layer-auto-close" style="display: none;">
    <br />
    <h3>打开 2秒 后自动关闭...</h3>
  </div>

</body>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
  layui.use(['element','jquery','drawer','layer','code'],function() {
    var element=layui.element;
    var $=layui.jquery;
    var drawer=layui.drawer;
    var layer=layui.layer;

    layui.code();

    $("#layerDrawerIframe").click(function() {
      drawer.open({
        title: ['用户管理','font-size:16px;color:#2d8cf0'],
        offset: 'r',
        area: "80%",
        maxmin: true,
        closeBtn: 1,
        iframe: window.top.location.origin+window.top.location.pathname+"view/document/table.html"
      })
    })

    $("#layerDrawerURL").click(function() {
      drawer.open({
        title: ['用户管理','font-size:16px;color:#2d8cf0'],
        offset: 'r',
        area: "80%",
        maxmin: true,
        closeBtn: 1,
        url: window.top.location.origin+window.top.location.pathname+"view/document/drawerFragment.html"
      })
    })

    $("#layerDrawerLeft").click(function() {
      drawer.open({
        offset: 'l',
        area: "30%",
        content: "left内容",
      })
    })
    $("#layerDrawerRight").click(function() {
      drawer.open({
        offset: 'r',
        area: "30%",
        content: "right内容",
      })
    })
    $("#layerDrawerTop").click(function() {
      drawer.open({
        offset: "t",
        content: "top内容",
      })
    })
    $("#layerDrawerBottom").click(function() {
      drawer.open({
        offset: "b",
        content: "bottom内容",
      })
    })

    $("#layerDrawer").click(function() {
      var index=drawer.open({
        title: ['标题','font-size:16px;color:#2d8cf0'],
        maxmin: true,
        offset: "r",
        area: "30%",
        content: "抽屉内容",
        btn: "关闭",
        yes: function(index,layero) {
          drawer.close(index);
          console.log(index,layero);
        },
        btnAlign: "l",
        closeBtn: 1,
      })
    })

    $("#layerDrawerParent").click(function() {
      var index=parent.layui.drawer.open({
        title: ['标题','font-size:16px;color:#2d8cf0'],
        maxmin: true,
        offset: "r",
        area: "30%",
        content: "抽屉内容",
        btn: "关闭",
        yes: function(index,layero) {
          parent.layui.drawer.close(index);
          console.log(index,layero);
        },
        btnAlign: "l",
        closeBtn: 1,
      })
    })

    $("#layertargetDemo").click(function() {
      drawer.open({
        target: "#layertargetEl",
        offset: "r",
        content: $(".layer-right"),
        area: "50%",
      });
    })

  })
</script>

</html>